<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
  <!--引入开发版本Vue-->
  <script type="text/javascript" src="../js/vue.js"></script>
<body>

    <!--
        data与el的2中写法
           1. el有两种写法
            (1). new Vue时候配置el属性.
            (2). 先创建Vue示例,随后在通过v.$mount('#root')指定el的值.
           2. data有2种写法
             (1).对象式
             (2).函数式
             如何选择: 目前那种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错.
            3.一个重要的原则:
               由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了.    
    -->
    
    <!-- 准备好一个容器 -->
    <div id="root">
       
        <h1>你好,{{name}}</h1>
            
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

    //el的两种写法
   /*const vm =  new Vue({
        //el:document.getElementById('root'),
        data:{
            name:'csc'
        }
    })
    console.log(v)
    v.$mount('#root') //第二种写法.使用$mount()挂载容器
     //   setTimeout(() => {
    //     v.$mount('#root')
    //   }, 1000*5);
    */

     //data的两种写法
     new Vue({
        el:'#root',
       /*  data:{
            name: '翔宇医疗'
        } */
        //data(){}也可以
         data:function(){
            console.log('@@@',this)
            return{
                name:'翔宇医疗'
            }
         }
     })
   
</script>

</html>